<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="住宿总览"
    width="1000px"
  >
    <div>
      <div class="ope_item">
        <div class="ope_left">楼宇选择</div>
        <div class="ope_right">
          <template v-for="(item, index) in lyList">
            <span
              class="span_item"
              :key="index"
              :class="{
              'active': item.id === activeLy
            }"
              @click="lyClick(item)"
            >{{item.mc}}</span>
          </template>
        </div>
      </div>
      <div class="ope_item">
        <div class="ope_left">楼层选择</div>
        <div class="ope_right">
          <template v-for="(item, index) in lcList">
            <span
              class="span_item"
              :key="index"
              :class="{
              'active': item.id === activeLc
            }"
              @click="lcClick(item)"
            >{{item.mc}}层</span>
          </template>
        </div>
      </div>
      <!-- 房间区域 -->
      <div class="fj_container">
        <template v-for="(item, index) in fjList">
          <div
            class="fj_item"
            :key="index"
          >
            <div class="fj_item_box">
              <div class="fj_name">{{item.fjBh}}</div>
              <!-- 床位列表 -->
              <div class="cw_container">
                <el-scrollbar :wrap-style="[{'height': '100%'}]">
                  <template v-for="(vo, i) in (item.beds || [])">
                    <div
                      class="cw_item"
                      :key="`fj_${index}_cw_${i}`"
                    >
                      <div class="cw_bh">{{vo.cwBh}}</div>
                      <div class="cw_mc one_line" :title="vo.xm">{{vo.xm === null ? '-' : vo.xm}}</div>
                    </div>
                  </template>
                </el-scrollbar>

              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      lyList: [],
      lcList: [],
      fjList: [],
      activeLy: "",
      activeLc: ""
    };
  },
  mounted() {
    // this.getData();
  },
  methods: {
    /**
     * @name getData
     * @description 获取数据
     * @author cjs1992
     * @date 2019-12-11 14:54:19
     */
    async getData() {
      await this.myDormPermissionBuilding();
    },
    /**
     * @name myDormPermissionBuilding
     * @description 获取我管理的楼宇资源
     * @author cjs1992
     * @date 2019-12-11 14:53:21
     */
    async myDormPermissionBuilding() {
      const res = await this.$store.dispatch(
        "common/getAllLy",
        {
          id: ''
        }
      );
      this.lyList = res || [];
      try {
        this.activeLy = this.lyList[0].id;
        // 获取楼层
        this.myDormPermissionFloor();
      } catch (error) {}
    },
    /**
     * @name lyClick
     * @description 楼宇点击
     * @author cjs1992
     * @date 2019-12-11 15:09:23
     */
    async lyClick(data) {
      const { id } = data;
      if (id === this.activeLy) {
        // 点击的active
        return;
      }
      this.activeLy = id;
      this.myDormPermissionFloor();
    },
    /**
     * @name myDormPermissionFloor
     * @description 我管理的楼层
     * @author cjs1992
     * @date 2019-12-11 15:09:41
     */
    async myDormPermissionFloor() {
      const res = await this.$store.dispatch("common/getAllLc", {
        id: this.activeLy
      });
      this.lcList = res || [];
      try {
        this.activeLc = this.lcList[0].id;
        this.myDormPermissionRoom();
      } catch (error) {}
    },
    /**
     * @name lcClick
     * @description 楼层点击
     * @author cjs1992
     * @date 2019-12-11 15:13:04
     */
    lcClick(data) {
      const { id } = data;
      if (id === this.activeLc) {
        // 点击的active
        return;
      }
      this.activeLc = id;
      this.myDormPermissionRoom();
    },
    /**
     * @name myDormPermissionRoom
     * @description 获取管理的房间
     * @author cjs1992
     * @date 2019-12-11 15:15:33
     */
    async myDormPermissionRoom() {
      const res = await this.$store.dispatch("homePage/allRoom", {
        lcId: this.activeLc
      });
      this.fjList = res.data || [];
    }
  }
};
</script>
<style lang="scss" scoped>
.ope_item {
  display: table;
  width: 100%;
  margin-bottom: 10px;
  .ope_left {
    display: table-cell;
    width: 80px;
    vertical-align: middle;
    text-align: right;
    padding-right: 10px;
  }
  .ope_right {
    display: table-cell;
    font-size: 0;
    .span_item {
      cursor: pointer;
      height: 36px;
      padding: 0 10px;
      line-height: 36px;
      display: inline-block;
      vertical-align: top;
      border: 1px solid #e0e0e0;
      border-left-width: 0;
      &.active {
        background-color: #02c58d;
        color: #fff;
      }
      &:first-child {
        border-left-width: 1px;
      }
    }
  }
}
.fj_container {
  // border: 1px solid #e0e0e0;
  max-height: 500px;
  overflow-y: auto;
  font-size: 0;
  .fj_item {
    display: inline-block;
    vertical-align: top;
    width: 16.66%;
    box-sizing: border-box;
    padding: 10px;
    height: 250px;
    .fj_item_box {
      border: 1px solid #e0e0e0;
      height: 100%;
      padding: 0 6px;
      .fj_name {
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: #12ad8a;
      }
      .cw_container {
        height: 190px;
        border: 1px solid #e0e0e0;
        border-width: 1px 0 0 0;
        box-sizing: border-box;
        overflow-y: auto;
      }
      .cw_item {
        display: table;
        width: 100%;
        border: 1px solid #e0e0e0;
        border-top-width: 0;
        table-layout: fixed;
        line-height: 30px;
        .cw_bh {
          display: table-cell;
          width: 30px;
          text-align: center;
          height: 30px;
          background-color: #f1f1f1;
        }
        .cw_mc {
          border-left: 1px solid #e0e0e0;
          text-align: center;
          height: 30px;
        }
      }
    }
  }
}
.dialog-footer {
  text-align: center;
  margin-top: 20px;
}
</style>
